<script setup lang='ts'>
import { addUsers, DeleteUsers, getCustomerShow, getInfo } from '@/api/carousel/carousel';
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';


interface tableDataType {
    createdTime: string;
    delFlag: number;
    displaying: number;
    jsBusinessType: string;
    mediaId: string;
    mediaLink: string;
    mediaType: string;
    mobileLink: string;
    mobileType: string;
    outLink: string;
    sort: number;
    title: string;
    updatedTime: string;
}

const tableData = ref<tableDataType[]>([]);

interface paramsType {
    displaying: number;
    jsBusinessType: string;
    mediaId: number;
}

let params = ref<paramsType>({
    mediaId: 0,
    jsBusinessType: '',
    displaying: 0
});
// 重置
function reset(){
    tableData.value.length = 0;
    getInfo().then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);
            console.log(tableData.value);
        });
    });
}

// 渲染
getInfo().then(res => {
    console.log(res);
    (res as any).rows.map((item: any) => {
        tableData.value.push(item);
        console.log(tableData.value);

    });
});

//是否展示
function show(id) {
    console.log(id.row);
    params.value.mediaId = id.row.mediaId;
    params.value.jsBusinessType = id.row.jsBusinessType;
    params.value.displaying = id.row.displaying;
    console.log(params.value);
    getCustomerShow(params.value).then(res => {
        console.log(res);
    });
}
//编辑
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const nameValidateForm = reactive({
    contentRich: '',
    createdTime: '',
    delFlag: 0,
    displaying: 0,
    jsBusinessType: '',
    mediaId: '',
    mediaLink: '',
    mobileLink: '',
    mobileType: '',
    outLink: '',
    sort: 1,
    title: '',
    updatedTime: '',
    jsBusinessId: ''
})
;
const imageUrlPc = ref('');
const imageUrl = ref('');
let  mediaId= ref();
function handleClick(edit) {
    mediaId.value = edit.row.mediaId;
    nameValidateForm.title = edit.row.title;
    nameValidateForm.outLink = edit.row.outLink;
    imageUrlPc.value = edit.row.mediaLink;
    imageUrl.value = edit.row.mobileLink;
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response
) => {
    imageUrl.value = response.fileName;
};
const handleAvatarSuccessPc: UploadProps['onSuccess'] = (
    response
) => {
    imageUrlPc.value = response.fileName;
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!');
        return false;
    }
    return true;
};
let headers = reactive({ 'Authorization': 'Bearer ' + getToken() });
let editData = ref({
    contentRich: '',
    createdTime: '',
    delFlag: 0,
    displaying: 0,
    jsBusinessType: '',
    jsBusinessId: '',
    mediaId: '',
    mediaLink: '',
    mobileLink: '',
    mobileType: '',
    outLink: '',
    sort: 1,
    title: '',
    updatedTime: ''
});

function changeEnter() {
    console.log('1');
    editData.value.title = nameValidateForm.title;
    editData.value.outLink = nameValidateForm.outLink;
    editData.value.mediaLink = nameValidateForm.mediaLink;
    editData.value.mobileLink = nameValidateForm.mobileLink;
    editData.value.mediaId = mediaId.value;
    // getCustomerShow(editData.value).then(res => {
    //     console.log(imageUrl.value);
    //     console.log(res);
    // });
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            addEnter();
            dialogFormVisible1.value=false;
            console.log('submit!');
            dialogFormVisible.value = false;
        } else {
            // dialogFormVisible1.value=false;
            // dialogFormVisible.value = false;
            console.log('error submit!');
            return false;
        }
    });
};
const submitForm1 = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            changeEnter()
            dialogFormVisible1.value=false;
            console.log('submit!');
            dialogFormVisible.value = false;
        } else {
            // dialogFormVisible1.value=false;
            // dialogFormVisible.value = false;
            console.log('error submit!');
            return false;
        }
    });
};
const formRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
//删除
const open = (tableDataEdit) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteUser(tableDataEdit);
            setTimeout(function(){
                reset();
            },100);
            ElMessage({
                type: 'success',
                message: '删除成功',

            });

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
};
let  mediaIdList= ref();
function deleteUser(tableDataEdit){
    console.log(tableDataEdit.row.mediaId);
    mediaIdList.value = tableDataEdit.row.mediaId;
    DeleteUsers(mediaIdList.value).then(res =>{
        console.log(res);
    });
}
//新增
interface addType{
    contentRich: string
    jsBusinessType: string
    mediaLink: string
    mediaType: string
    mobileLink: string
    mobileType: string
    outLink: string
    sort: number
    title: string
    videoList: []
}
let addMediaId =ref<addType>({
    contentRich: '',
    jsBusinessType:'',
    mediaLink: '',
    mediaType: '',
    mobileLink: '',
    mobileType: '',
    outLink: '',
    sort: 0,
    title: '',
    videoList: []
});
let addtext = ref();
function addUser(){
    console.log('1');

}
function addEnter(){
    addMediaId.value.contentRich = addtext.value;
    addMediaId.value.jsBusinessType= "pc_home_scrolling_pic";
    addMediaId.value.mediaLink = imageUrlPc.value;
    addMediaId.value.mobileType = "picture";
    addMediaId.value.mobileLink = imageUrl.value;
    addMediaId.value.mediaType = "picture";
    addMediaId.value.outLink = nameValidateForm.outLink;
    addMediaId.value.sort = nameValidateForm.sort;
    addMediaId.value.title =nameValidateForm.title;
    addMediaId.value.videoList = [];
    console.log(addMediaId.value);
    addUsers(addMediaId.value).then(res =>{
        console.log(res);
    });
    setTimeout(function(){
        reset();
    },100);

}
</script>


<template>
    <div>
    <div>
        <el-button  type='primary' style='margin: 20px' @click='addUser ;dialogFormVisible1 = true' >+新增</el-button>
<!--        表单-->
        <el-table :data='tableData' style='width: 90%;margin: auto;text-align: center'>
            <el-table-column fixed prop='title' label='名称' />
            <el-table-column prop='name' label='图片/视频' >
                <template #default='img'>
                    <img :src=' "/dev-api"+tableData[img.$index].mediaLink' style='width: 50px;height: 50px'>
                </template>
            </el-table-column>
            >
            <el-table-column prop='outLink' label='链接'  />
            <el-table-column prop='displaying' label='是否展示'>
                <template #default='tableDataDisplay'>
                    <el-switch
                        v-model='tableDataDisplay.row.displaying'
                        size='large'
                        prop='displaying'
                        @click='show(tableDataDisplay)'
                        :active-value=1
                        :inactive-value=0
                    />
                </template>
            </el-table-column>
            <el-table-column prop='sort' label='排序' />

            <el-table-column fixed='right' label='操作'>
                <template #default=tableDataEdit>
                    <el-button link type='primary' size='small'
                               @click='handleClick(tableDataEdit);dialogFormVisible = true'>
                        编辑
                    </el-button>
                    <el-button @click="open(tableDataEdit)" link type='primary' size='small' >
                        删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--    编辑-->
    <el-dialog v-model='dialogFormVisible' title='编辑' width='700'>
        <el-form
            ref='formRef'
            style='max-width: 600px'
            :model='nameValidateForm'
            label-width='auto'
            class='demo-ruleForm'
        >
            <el-form-item
                label='名称'
                prop='name'
                :rules="[
        { required: false, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">

                <el-input
                    v-model.string='nameValidateForm.title
'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='轮播图'
                prop='mien'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccessPc'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>

                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='移动端轮播图'
                prop='mien'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccess'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>

                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='链接'
                prop='introduction'
                :rules="[
        { required: false, message: '请输入链接' },
        { type: 'string', message: '请输入' },
                 ]">

                <el-input
                    v-model.string='nameValidateForm.outLink
'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>

            富文本
            <el-form-item style='margin-left: 80px ;width: 520px'>

                <editor />
            </el-form-item>
            <el-form-item style='width: 200px;margin-left: 500px'>
                <el-button type='primary' @click=';submitForm1(formRef); '>确认</el-button>
                <el-button @click='resetForm(formRef);dialogFormVisible=false'>取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>
    <!--    新增-->
    <el-dialog v-model='dialogFormVisible1' title='新增' width='700'>
        <el-form
            ref='formRef'
            style='max-width: 600px'
            :model='nameValidateForm'
            label-width='auto'
            class='demo-ruleForm'
        >
            <el-form-item
                label='名称'
                prop='title'
                :rules="[
        { required: true, message: '请输入名称' },
        { type: '', message: '请输入' },
                 ]">

                <el-input
                    v-model.string='nameValidateForm.title
'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='轮播图'
                prop='mien'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccessPc'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>

                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='移动端轮播图'
                prop='mien'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccess'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>

                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='链接'
                prop='outLink'
                :rules="[
        { required: true, message: '请输入链接' },
        { type: 'string', message: '请输入' },
                 ]">

                <el-input
                    v-model.string='nameValidateForm.outLink'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item style='margin-left: 80px ;width: 520px'>
                <editor v-model='addtext' />
            </el-form-item>
            <el-form-item
                label='排序'
                prop='sort'
                :rules="[
        { required: true, message: '请输入排序' },
        { type: 'string', message: '请输入' },
                 ]">
                <el-input
                    v-model.string='nameValidateForm.sort'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item style='width: 200px;margin-left: 500px'>
                <el-button type='primary' @click='submitForm(formRef);'>确认</el-button>
                <el-button @click='resetForm(formRef);dialogFormVisible1=false'>取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>
    </div>
</template>

<style scoped>
/deep/ .cell{
    text-align: center;
}
img{
    display: inline-block;
}
</style>
